<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞牛影视 - 分类</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/utilities.css">
  <link rel="stylesheet" href="css/remixicon.min.css">
  <style>
    .media-grid{
      max-height: calc(100vh - 250px);
    }
  </style>
</head>
<body class="theme-dark">
  <div class="app-container">
    <!-- 侧边栏 -->
    <aside class="sidebar" id="sidebar">
    </aside>

    <!-- 移动端侧边栏遮罩 -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 顶部导航栏 -->
      <header class="header" id="header">
      </header>

      <!-- 页面内容 -->
      <div class="page-content">
        <section class="section">
          <h1 class="page-title" id="categoryTitle">分类</h1>

          <!-- 筛选和排序 -->
          <div class="filter-sort-bar">
            <div class="filter-sort-actions">
              <button class="btn btn-outline btn-sm" id="filterToggle">
                <i class="ri-filter-line"></i>
                筛选
                <span class="filter-badge" id="filterBadge">0</span>
              </button>

              <div class="dropdown" id="sortDropdown">
                <button class="btn btn-outline btn-sm dropdown-toggle">
                  <i class="ri-sort-asc"></i>
                  <span id="sortLabel">添加日期</span>
                  <i class="ri-arrow-down-s-line"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-header">排序方式</div>
                  <div class="dropdown-divider"></div>
                  <button class="dropdown-item" data-sort="id">添加日期</button>
                  <button class="dropdown-item" data-sort="hits">热度</button>
                  <button class="dropdown-item" data-sort="score">评分</button>
                  <button class="dropdown-item" data-sort="time">发行年份</button>
                </div>
              </div>

              <div class="dropdown" id="orderDropdown">
                <button class="btn btn-outline btn-sm dropdown-toggle">
                  <i class="ri-sort-desc"></i>
                  <span id="orderLabel">降序</span>
                  <i class="ri-arrow-down-s-line"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-header">排序顺序</div>
                  <div class="dropdown-divider"></div>
                  <button class="dropdown-item" data-order="vod_score ASC">升序</button>
                  <button class="dropdown-item" data-order="vod_score DESC">降序</button>
                </div>
              </div>

              <button class="btn btn-ghost btn-sm" id="clearFilters" style="display: none;">
                <i class="ri-close-line"></i>
                清除筛选
              </button>
            </div>

            <div class="total-items" id="totalItems">共 0 个项目</div>
          </div>

          <!-- 筛选面板 -->
          <div class="filter-panel" id="filterPanel">
            <div class="filter-groups" id="filterGroups">
              <!-- 筛选组将通过JS动态生成 -->
            </div>

            <div class="filter-panel-footer">
              <button class="btn btn-ghost" id="collapseFilters">
                <i class="ri-arrow-up-s-line"></i>
                收起筛选
              </button>
            </div>
          </div>

          <!-- 媒体列表 -->
          <div class="media-grid infinite-scroll" id="mediaGrid">
            <!-- 加载中状态 -->
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
              <div class="media-skeleton"></div>
          </div>

          <!-- 加载更多指示器 -->
          <div class="loading-more" id="loadingMore">
            <div class="spinner"></div>
            <span>加载更多...</span> 
          </div>
        </section>
      </div>
    </main>

    <!-- 源切换对话框 -->
    <div class="modal" id="sourceModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>切换媒体源</h2>
          <button class="btn-icon modal-close" id="closeSourceModal">
            <i class="ri-close-line"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="source-list" id="sourceList">
            <!-- 源列表将通过JS动态生成 -->
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" id="cancelSourceModal">取消</button>
          <button class="btn btn-primary" id="addSourceBtn">添加源</button>
        </div>
      </div>
    </div>

    <!-- 添加源对话框 -->
    <div class="modal" id="addSourceModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>添加媒体源</h2>
          <button class="btn-icon modal-close" id="closeAddSourceModal">
            <i class="ri-close-line"></i>
          </button>
        </div>
        <div class="modal-body">
          <form id="addSourceForm">
            <div class="form-group">
              <label for="sourceName">名称</label>
              <input type="text" id="sourceName" placeholder="媒体库名称" required>
            </div>
            <div class="form-group">
              <label for="sourceUrl">网站地址</label>
              <input type="url" id="sourceUrl" placeholder="https://example.com" required>
            </div>
            <div class="form-group">
              <label for="sourceApi">API地址</label>
              <input type="url" id="sourceApi" placeholder="https://api.example.com" required>
            </div>
            <div class="form-group">
              <label for="sourceProxy">代理地址 (可选)</label>
              <input type="url" id="sourceProxy" placeholder="https://proxy.example.com">
            </div>
            <div class="form-group">
              <label for="sourceType">类型</label>
              <select id="sourceType" required>
                <option value="movie">电影</option>
                <option value="tv">电视剧</option>
                <option value="anime">动漫</option>
                <option value="variety">综艺</option>
                <option value="other">其他</option>
                <option value="adult">18+</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" id="cancelAddSource">取消</button>
          <button class="btn btn-primary" id="saveSourceBtn">保存</button>
        </div>
      </div>
    </div>

    <!-- 主题选择对话框 -->
    <div class="modal" id="themeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>选择主题</h2>
          <button class="btn-icon modal-close" id="closeThemeModal">
            <i class="ri-close-line"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="theme-grid">
            <button class="theme-option" data-theme="light">
              <div class="theme-preview light-preview"></div>
              <span>浅色</span>
            </button>
            <button class="theme-option" data-theme="dark">
              <div class="theme-preview dark-preview"></div>
              <span>深色</span>
            </button>
            <button class="theme-option" data-theme="blue">
              <div class="theme-preview blue-preview"></div>
              <span>蓝色</span>
            </button>
            <button class="theme-option" data-theme="green">
              <div class="theme-preview green-preview"></div>
              <span>绿色</span>
            </button>
            <button class="theme-option" data-theme="purple">
              <div class="theme-preview purple-preview"></div>
              <span>紫色</span>
            </button>
            <button class="theme-option" data-theme="orange">
              <div class="theme-preview orange-preview"></div>
              <span>橙色</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="js/config.js"></script>
  <script src="js/api.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/category.js"></script>
</body>
</html>
